<!--
 * @Description  : 
 * @Autor        : guoxi
 * @Date         : 2022-05-25 11:27:03
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-05-27 09:38:50
-->
<template>
  <div ref="preview" v-loading="model.loading" class="preview-box"></div>
</template>

<script lang="ts" setup>
declare var AnyShareSDKFactory;
import { reactive, onMounted, ref } from "vue";
import { storageLocal } from "/@/utils/storage";
import { getAccToken } from "/@/utils/ecm";
const model = reactive({
  loading: false
});
const preview = ref(null);

onMounted(async () => {
  await getAccToken();
  const sdk = await AnyShareSDKFactory.create({
    apiBase: "http://127.0.0.1:3001",
    rootElement: preview.value,
    token: storageLocal.getItem("ecm-token"),
    locale: "zh-cn"
  });
  sdk.preview(
    {
      docid:
        "gns://269DB7E528FB4664AA3B63FF8D83BC3C/60BBC9F0D7E74597983D04240E9CFA4F",
      name: "项目年度预算表(项目团队填写)-测试.xlsx"
      // size: 10116,
      // rev: "4DDDA5AB9DA14D808EBBA6A231F78FC1",
    },
    false,
    { isShowActionMenuInSdk: true } //可选，是否展示操作菜单，默认为true
  );
});
</script>
<style scoped lang="scss">
.preview-box {
  width: 100vw;
  height: 100vw;
}

::v-deep .as-components-preview-header-title {
  display: flex;
  align-items: center;
}

::v-deep .as-components-preview-header-box {
  display: flex;
  justify-content: space-between;
}

::v-deep .as-components-preview-header-icon {
  margin-right: 14px;
}
</style>
